<template>
    <div style="display:flex;padding: 5px 0px;justify-content: space-between;align-items: center;width: 280px;">
        <div tabindex="0" @keyup="deletePoint" id="w-g-colorBar" :style="{ background: linebackground }"
            @click="handleClick" class="w-g-color-picker-bar">
            <div v-for="item in gradientPoint" :key="item.genid" @mousedown="mousedown(item.genid)"
                @click='(e) => e.stopPropagation()' :style="{ left: item.position, background: item.color }"
                class="slider-bar-pointer">
            </div>
        </div>
        <div style="position: relative;">
            <input @keydown="numTxtKeyDown" autocomplete="off" id="deg" @input="input" @blur="inputBlur"
                @focus="() => showdeg = false" class="input-deg" />
            <span v-show="showdeg" class="degtips">°</span>
        </div>

    </div>
</template>

<script>
import { DEFAULT_LINEAR_GRADIENT, genId } from './REG_gradients.js'
export default {
    name: 'w-slider-gradient',
    props: {
        color: {
            required: true
        }
    },
    data() {
        return {
            isDragging: false,
            linebackground: DEFAULT_LINEAR_GRADIENT,
            sliderLeft: 0,
            selsectID: '',
            showdeg: true
        }
    },
    computed: {
        //获取色相值
        gradientPoint() {
            return this.color.get('genGradientPoint');
        },
    },

    watch: {
        gradientPoint(val) {
            this.updateView();
        }
    },

    mounted() {
        this.updateView();

    },
    methods: {
        //点击时
        handleClick(event) {
            let sliderBar = document.querySelector('#w-g-colorBar').getBoundingClientRect();
            //滑块滑动的范围
            let left = event.clientX - sliderBar.left;
            left = Math.max(0, Math.min(sliderBar.width, left))
            left = Math.round(left / sliderBar.width * 100);
            const color = {
                position: left + '%',
                color: this.color.colorValue,
                genid: genId()
            }
            this.color.addgradientPoint(color)
        },

        mousedown(id) {
            if (this.isDragging) return; //防止重复
            this.color.currentgenidChang(id);
            console.log("按下")
            document.onselectstart = () => false;
            document.ondragstart = () => false;
            document.addEventListener('mousemove', this.moveFn);
            document.addEventListener('mouseup', this.upFn);
            this.isDragging = true;
        },

        moveFn(event) {
            let sliderBar = document.querySelector('#w-g-colorBar').getBoundingClientRect();
            // 让sliderBar获取焦点，以便键盘事件生效。非表单元素配合tabindex使用
            document.querySelector('#w-g-colorBar').focus();
            //滑块滑动的范围
            let left = event.clientX - sliderBar.left;
            left = Math.max(0, Math.min(sliderBar.width, left))
            left = Math.round(left / sliderBar.width * 100);
            this.color.set('lineMove', left + '%');
        },
        upFn(event) {
            console.log('松开')
            document.removeEventListener('mousemove', this.moveFn);
            document.removeEventListener('mouseup', this.upFn);
            document.onselectstart = null;
            document.ondragstart = null;
            this.isDragging = false;
        },
        //文本框霍获取焦点
        inputBlur(e) {
            if (/^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/.test(e.target.value)) {
                e.target.value = e.target.value.replace(/\D/g, '')
            } else {
                e.target.value = null
            }
            this.color.set('angle', e.target.value)
            this.showdeg = true

        },
        input(e) {
            if (/^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/.test(e.target.value)) {
                e.target.value = e.target.value.replace(/\D/g, '')
            } else {
                e.target.value = null
            }
        },
        //删除颜色点
        deletePoint(e) {
            this.color.deletePoint(e);
        },

        //键盘上下箭头加减数字
        numTxtKeyDown(e) {
            const keyCode = e.keyCode;
            if (keyCode == 38) {
                //UP Arrow
                if (!isNaN(e.target.value)) {
                    e.target.value = Number(e.target.value) + 1;
                    return false;
                }
            }
            else if (keyCode == 40) {
                //DOWN Arrow
                if (!isNaN(e.target.value)) {
                    if (Number(e.target.value) <= 0) {
                        e.target.value = 0;
                    }
                    else {
                        e.target.value = Number(e.target.value) - 1;
                    }
                }
                return false;
            }
        },
        //更新颜色
        updateView() {
            this.$nextTick(() => {
                const dom = document.querySelector('#deg')
                dom.value = this.color.get('angle')
            })
            this.linebackground = this.color.gradientcolorValue
        }
    },
}
</script>

<style scoped>
@import './commom.css';
* {
    outline: none;
}

.w-g-color-picker-bar {
    width: 210px;
    height: 12px;
    position: relative;
    /* margin:10px 0px 0px 0px; */
    /* float: right; */
}

.input-deg {
    width: 60px;
    height: 24px;
    padding: 2px 15px;
    border-radius: 3px;
    border: 1px solid #e6e6e6;
    outline: none;
    text-align: center;
}

.input-deg:focus {
    border-color: #409eff;
}

.degtips {
    position: absolute;
    top: 2px;
    right: 8px;
}
</style>
